<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jQuery3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
	.left{
		background-color: #4bcfe9;
	}
	.nav span{
		color: #6ecabc;
	}
	.color1{
		background-color: #4BCFE9;
	}
	.color2{
		background-color: #E2A31F;
	}
	.color3{
		background-color: #38B6BD;
	}
	.color4{
		background-color: #FC8184;
	}
	h5{
		text-align: center;
		width: 200px;
		padding: 5px;
		margin-top: 25px;
	}
	</style>
	<body>
		<div class="container mt-1">
			<div class="row">
				<!-- 左侧代码 -->
				<div class="col-12 col-sm-12 col-md-3 left h-auto">
					<div class="row">
						<div class="col-5 col-sm-6 col-md-12">
							<img src="img/images/c.jpg" alt="" class="img-fluid border p-2">
							<h3 class="text-white text-center">肖小博</h3>
						</div>
						<div class="col-6 col-sm-6 col-md-12">
							<h4>出生年月</h4>
							<p>2001年9月5日</p>
							<h4>联系电话</h4>
							<p>29337</p>
							<h4>电子邮箱</h4>
							<p>qq.com</p>
							<h4>联系地址</h4>
							<p>中国台湾省</p>
						</div>
					</div>
				</div>
				<!-- 右侧代码 -->
				<div class="col-12 col-sm-12 col-md-9 right">
					<!-- 导航区 -->
					<div>
						<ul class="nav">
							<li class="nav-item">
								<span class="fa fa-user-circle-o fa-2x"></span>
								<a href="#">个人简历</a>
							</li>
							<li class="nav-item mx-1">
								<span class="fa fa-envelope-o fa-2x"></span>
								<a href="#">请给我发邮件</a>
							</li>
							<li class="nav-item">
								<span class="fa fa-photo fa-2x"></span>
								<a href="#">我的照片</a>
							</li>
						</ul>
					</div>
					<!-- 工作经历 -->
					<h5 class="color1">工作经历</h5>
					<div class="px-5 py-2">
						<table class="table">
							<thead class="table-success">
								<tr>
									<th>#</th>
									<th>时间</th>
									<th>单位</th>
									<th>职位</th>
								</tr>
							</thead>
							<tbody class="table-info">
								<tr>
									<th>1</th>
									<td>2018.9-2019.9</td>
									<td>亨通网络公司</td>
									<td>运维工程师</td>
								</tr>
								<tr>
									<th>2</th>
									<td>2018.9-2019.9</td>
									<td>亨通网络公司</td>
									<td>运维工程师</td>
								</tr>
								<tr>
									<th>3</th>
									<td>2018.9-2019.9</td>
									<td>亨通网络公司</td>
									<td>运维工程师</td>
								</tr>
								<tr>
									<th>4</th>
									<td>2018.9-2019.9</td>
									<td>亨通网络公司</td>
									<td>运维工程师</td>
								</tr>
							<tbody>
							</tbody>
						</table>
					</div>
					<!-- 专业技能 -->
					<h5 class="color2">专业技能</h5>
					<div class="px-5 py-2">
						<div class="row">
							<div class="col-6">
								<div class="card border-primary text-primary">
									<div class="card-header">擅长的技能</div>
									<div class="card-body">
										<p class="card-text">
											HTML5\CSS3\JavaScript\Java\Python\PHP\Node.js\Vue.js\Mysql\oracle\达梦数据库\Bootstrap\C语言\数据标注\Linux\麒麟操作系统
										</p>
									</div>
								</div>
							</div>
							<div class="col-6">
								<div class="card border-primary text-primary">
									<div class="card-header">熟悉的编程语言</div>
									<div class="card-body">
										<p class="card-text">
											Java\JavaScript\C\Python\
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 综合概述 -->
					<h5 class="color4">综合概述</h5>
					<div class="px-5 py-2">
						<div id="accordion">
							<div class="card">
								<div class="card-header">
									<a href="#collapse-1" class="card-link" data-toggle="collapse">获得证书</a>
								</div>
								<div id="collapse-1" class="collapse show" data-parent="#accordion">
									<div class="card-body">
										<ul class="list-group">
											<li class="list-group-item list-group-item-info">
												1、大学英语四、六级证书
											</li>
											<li class="list-group-item list-group-item-info">
												2、厂商认证:华为HCIP、华为HCIE、红帽RHCE
											</li>
											<li class="list-group-item list-group-item-info">
												3、决赛证书
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="card">
								<div class="card-header">
									<a href="#collapse-2" class="card-link" data-toggle="collapse">获得证书</a>
								</div>
								<div id="collapse-2" class="collapse" data-parent="#accordion">
									<div class="card-body">
										<ul class="list-group">
											<li class="list-group-item list-group-item-info">
												1、大学英语四、六级证书
											</li>
											<li class="list-group-item list-group-item-info">
												2、厂商认证:华为HCIP、华为HCIE、红帽RHCE
											</li>
											<li class="list-group-item list-group-item-info">
												3、决赛证书
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="card">
								<div class="card-header">
									<a href="#collapse-3" class="card-link" data-toggle="collapse">获得证书</a>
								</div>
								<div id="collapse-3" class="collapse" data-parent="#accordion">
									<div class="card-body">
										<ul class="list-group">
											<li class="list-group-item list-group-item-info">
												1、大学英语四、六级证书
											</li>
											<li class="list-group-item list-group-item-info">
												2、厂商认证:华为HCIP、华为HCIE、红帽RHCE
											</li>
											<li class="list-group-item list-group-item-info">
												3、决赛证书
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>